<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: antiquewhite;

        }


        .box {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;

            /* 水平方向： */
            container-type: inline-size;
        }


        img {
            /* container-type:inline-size可以让普通元素变成container容器元素，而cqw是容器宽度单位，1cqw=1%的容器宽度，100cqw就是容器宽度 */
            width: calc(25cqw - 1.5rem / 4);
            height: calc(25cqw - 1.5rem / 4);
            object-fit: cover;
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../images/1.jpg" />
        <img src="../images/1.jpg" />
        <img src="../images/1.jpg" />
        <img src="../images/1.jpg" />
        <img src="../images/1.jpg" />
        <img src="../images/1.jpg" />
        </ul>
</body>

</html>